<template>
  <a-modal
    title="人员列表"
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
      <a-col :md="24" :sm="24" id="selectArea">
        <a-card :bordered="false">
          工号：
          <a-input
            :style="{ width: '200px', marginBottom: '15px' }"
            placeholder="请输入工号"
            v-model="queryParam.jobNumber"
          ></a-input>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：
          <a-input
            :style="{ width: '200px', marginBottom: '15px' }"
            placeholder="请输入姓名"
            v-model="queryParam.realname"
          ></a-input>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号：
          <a-input
            :style="{ width: '220px', marginBottom: '15px' }"
            placeholder="请输入身份证号"
            v-model="queryParam.idCardNumber"
          ></a-input>
          <br />
          手机号：
          <a-input
            :style="{ width: '185px', marginBottom: '15px' }"
            placeholder="请输入手机号"
            v-model="queryParam.phone"
          ></a-input>
          <a-button @click="onSearch" style="margin-left: 40px" icon="search" size="small">查询</a-button>
          <a-button @click="searchReset(1)" style="margin: 0 20px" icon="redo" size="small">重置</a-button>
          <!--用户列表-->
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @change="handleTableChange"
          >
            <span slot="contractPeriod" slot-scope="text, record">
              <span v-for="item in contractPeriodList" v-if="record.contractPeriod == item.value"
                >{{ item.text }}
              </span>
            </span>
            <template slot="email" slot-scope="text">
              <j-ellipsis :value="text" :length="18"></j-ellipsis>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import { getUserList } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterObj } from '@/utils/util'
import { getAction } from '../../../api/manage'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import JEllipsis from '@/components/jeecg/JEllipsis'
export default {
  name: 'JSelectCertificatePersonModal',
  mixins: [JeecgListMixin],
  components: { JEllipsis },
  data() {
    return {
      visible: false,
      model: {},
      confirmLoading: false,
      title: '选择人员',
      contractPeriodList: [], //有效日期列表
      queryParam: {
        jobNumber: '',
        realname: '',
        idCardNumber: '',
        phone: '',
      },
      columns: [
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username',
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'realname',
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex_dictText',
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'phone',
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email',
          scopedSlots: { customRender: 'email' },
        },
        {
          title: '所属部门',
          align: 'center',
          dataIndex: 'departName',
        },
        {
          title: '角色',
          align: 'center',
          dataIndex: 'roleName',
        },
      ],
      onJobState: '',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        list: '/sys/user/list',
      },
    }
  },
  created() {
    //Step.2 加载用户数据
    this.getContractPeriodList()
  },
  methods: {
    loadData() {
      this.loading = true
      let params = this.getQueryParams() //查询条件
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    //合同有效日期
    getContractPeriodList() {
      initDictOptions('contractor_validity_period').then((res) => {
        if (res.success) {
          this.contractPeriodList = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if(isNaN(pagination.pageSize)){
        pagination.pageSize = Number(pagination.pageSizeOptions[0])
      }
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    open(personnelType) {
      this.onJobState = personnelType
      this.visible = true
      //Step.1 清空选中用户
      this.ipagination.current = 1
      this.dataSource = []
      this.selectedRowKeys = []
      this.selectedRows = []
      //Step.2 加载用户数据
      this.loadData()
    },
    handleCancel() {
      this.close()
    },
    handleSubmit() {
      if (this.selectedRowKeys.length < 1) {
        this.$message.error('请选择一条数据!')
        return
      }
      this.$emit('submit', this.selectionRows)
      this.close()
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      param.onJobState = this.onJobState
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.columns.length; a++) {
        str += ',' + this.columns[a].dataIndex
      }
      return str
    },
    onSearch() {
      this.loadData(1)
    },
    searchReset(num) {
      let that = this
      if (num !== 0) {
        that.queryParam = {}
        that.loadData(1)
      }
      that.selectedRowKeys = []
      that.sendData = []
      that.selectedKeys = []
    },
    close() {
      this.searchReset(0)
      this.visible = false
      this.ids = ''
      this.queryParam = {}
      // this.queryParam.code = ''
      // this.queryParam.name = ''
      // this.queryParam.mobile = ''
    },
  },
}
</script>